<template>
    <div class="App">
        <el-container>
        <el-header style="float:right">  

          <el-row>
            <el-col :span="12"><span style="float:left">零食铺子仓库管理系统</span></el-col>
            <el-col :span="12"><span style="float:right">
              <el-dropdown style="width: 70px;cursor: pointer;">
                <span style="font-size:26px;color:white;">{{sesUser.realName}}</span>
          <el-dropdown-menu slot="dropdown">
        <el-dropdown-item style="font-size: 14px; padding: 5px 0"> <el-button type="text" @click="dialogFormVisible = true">个人信息</el-button></el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0"><el-button @click="logout" type="danger">退出登录</el-button></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
              </span></el-col>
         </el-row>
  <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" >
    <el-form label-width="80px">
            <el-form-item label="用户名" >
              <el-input v-model="sesUser.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="sesUser.userPwd"></el-input>
            </el-form-item>
            <el-form-item label="实名认证">
              <el-input v-model="sesUser.realName"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="sesUser.phone"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update()">修改</el-button>
          </div>
         </el-dialog> 
           </el-header>
        <el-container>
          <el-aside width="200px">
              <el-menu
                            class="el-menu-vertical-demo"
                            style="width:200px;text-align:left;"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            :default-active="this.$route.path"
                            router
                            
                           
                         >

                              <el-menu-item  v-for="route in routeList" 
                                 :index="route.url.toString()"
                                 :key="route.trreId"
                                >
                                <i class="el-icon-menu"></i>
                                <span slot="title">{{route.trreName}}</span>
                            </el-menu-item>

                            
                            
                            </el-menu>
          </el-aside>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
export default {
    name: "App",
     data() {
      return {
        dialogFormVisible: false,
         //权限集合对象
          routeList:this.$store.getters.getSesUser,
      };
     },
    computed:{
        sesUser(){
          console.log(this.$store.getters.getSesUser[0]);
            return this.$store.getters.getSesUser[0];
        }
    },
   
    methods:{
        //注销方法
        logout(){
            //跳到后端页面，成功
            this.$axios.post("login/loginout").then(resp=>{
                //跳页面
                this.$store.dispatch("change","login");
                //跳方法
                this.$store.dispatch("logout");
            });
        },
         update() {
      var url = "/login/updateUser";
      this.$axios.post(url, this.sesUser).then((resp) => {
        this.dialogFormVisible = false;
        this.$message({
          message: "修改成功",
          type: "success",
        });
      });
    },

    },
    components: {}
}
</script>

<style  scoped>
.el-aside {
    background-color: #545c64;
    color: #333;
   
    height: 874px;
    

  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
    
  }
.el-header, .el-footer {
    background-color: #333;
    color: white;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #1076eb;
    color: #333; 
    line-height: 30px;
    min-height: 850px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    line-height: 30px;
  }

  .el-menu{
    min-height: 850px;
  }
</style>
